<template>
  <div id="baseButton">
    <!-- 标题 -->
    <Title :title="title" />
    <el-card>
      <el-row class="header-box">
        <!-- <el-col :span="10">
          <div class="box">
            <span>青年英才</span>
            <span>5</span>
          </div>
          <div class="box">
            <span>青年英才</span>
            <span>5</span>
          </div>
          <div class="box">
            <span>青年英才</span>
            <span>5</span>
          </div>
          <div class="box">
            <span>青年英才</span>
            <span>5</span>
          </div>
        </el-col> -->
        <el-col :span="24">
          <el-col :span="6" style="margin-left: 20px">
            <el-input
              v-model="queryParams.keyword"
              placeholder="姓名，单位"
              class="input-with-select"
            />
          </el-col>
          <el-col :span="6">
            <el-select v-model="queryParams.apply_post" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <!-- <el-button type="warning">导出</el-button> -->
          </el-col>
          <el-col :span="12" />
          <!-- <el-row>

          </el-row> -->
        </el-col>
      </el-row>
      <BaseTable
        :has-index="true"
        :has-border="true"
        :table-data="tableData"
        :table-data-total="total"
        :table-column-options="tableColumnOptions"
        @tableUpdate="tableUpdate"
        @selectionChange="selectionChange"
      >
        <!-- 类型插槽 -->
        <template #tag="{ data }">
          <div class="tag">
            <el-tag v-if="data.type == 1" type="success">tag1</el-tag>
            <el-tag v-if="data.type == 0" type="danger">tag2</el-tag>
          </div>
        </template>
        <!-- 操作插槽 -->
        <template
          v-if="role === '学院' || role === '专家'"
          #operation="{ data }"
        >
          <div class="action">
            <el-link
              :underline="false"
              @click="handlePreview(data)"
            ><i class="el-icon-view" />查看
            </el-link>
            <el-link :underline="false" @click="downloadResume(data.id)">
              <i class="el-icon-download" />
              下载
            </el-link>
            <el-link v-if="role === '学院'" :underline="false">
              <i class="el-icon-upload2" />
              上传意见
            </el-link>
            <el-link v-else :underline="false">
              <i class="el-icon-upload2" />
              进入评审
            </el-link>
            <!-- <span @click="tableRowEdit(data)">编辑</span> -->
            <!-- <span id="delete" @click="tableRowDelete(data)">shangc</span> -->
          </div>
        </template>
        <template
          v-if="role === '超级管理员' || role === '管理员'"
          #operation="{ data }"
        >
          <div class="action">
            <el-link
              :underline="false"
              @click="handlePreview(data)"
            >查看
            </el-link>
            <el-link :underline="false" @click="downloadResume(data.id)">
              下载
            </el-link>
            <el-link :underline="false" @click="handleOpenList(data)">
              分配
            </el-link>
            <!-- <span @click="tableRowEdit(data)">编辑</span> -->
            <!-- <span id="delete" @click="tableRowDelete(data)">shangc</span> -->
          </div>
        </template>
        <!-- 链接插槽 -->
        <!-- <template #link="{ data }">
        <span id="link" @click="check(data)">查看</span>
      </template> -->
      </BaseTable>
    </el-card>
    <LookInfo ref="lookInfo" />
    <PersonList ref="personList" @finish="getAllocationList" />
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import LookInfo from './lookInfo'
import PersonList from './components/PersonList/index'
import config from './config'
import { downloadFile } from '@/utils/utils'
import {
  getPersonnelType,
  getAllocationList,
  exportPersonnelList
} from '@/api/personnel'
const role = localStorage.getItem('role')
export default {
  components: {
    BaseTable,
    LookInfo,
    PersonList
  },
  data () {
    return {
      queryParams: {
        keyword: '',
        apply_post: '',
        page: 1
      },
      title: '',
      role,
      total: 0,
      // 表格组件--模拟数据
      tableData: [],
      /**
       * 表格列项数据 (必传)
       * label 表格列项名称
       * prop: ''
       * width 列项宽度
       * align       内容对齐方式 (默认居中)
       * headerAlign 表头对齐方式 (默认居中)
       * columnType  是否开启插槽
       * soltName    插槽名
       */
      tableColumnOptions: config.tableColumnOptions[role],
      options: []
    }
  },
  created () {
    // 设置标题
    this.title = this.$route.meta.title
    this.getPersonnelType()
    this.getAllocationList()
  },
  methods: {
    selectionChange (e) {
      console.log('选择框改变时：', e)
    },
    tableUpdate (e) {
      console.log('表格发生变化时', e)
    },
    tableRowEdit (e) {
      console.log('拿到此行的数据', e)
    },
    tableRowDelete (e) {
      console.log(e)
    },
    // 查看详细信息
    handlePreview (e){
      // console.log('hhhh')
      this.$refs.lookInfo.open(e.id)
    },
    handleSearch () {
      this.getAllocationList()
    },
    // 获取人才分类
    async getPersonnelType () {
      const res = await getPersonnelType(this.queryParams)
      this.options = res.data
    },
    // 获取人才列表
    async getAllocationList () {
      const res = await getAllocationList(this.queryParams)
      this.total = res.data.total
      this.tableData = res.data.data
    },
    handleOpenList (data) {
      this.$refs.personList.open(data.id)
    },
    // 个人信息下载
    async downloadResume (id) {
      const downloadElement = document.createElement('a')
      const href = `http://xnjdhr.wm71.mttest.cn/api.php/Resume/resume?id=${id}&type=3`
      downloadElement.style.display = 'none'
      downloadElement.href = href
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
    },
    // 导出
    async exportPersonnelList () {
      const res = await exportPersonnelList(this.queryParams)
      downloadFile(res, '人才列表')
    }
  }
}
</script>

<style lang="scss" scoped>
.action {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.header-box {
  margin-bottom: 14px;
  .el-col {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .box {
      margin-left: 15px;
      width: 144px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background: #f28e02;
      border-radius: 3px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      &:nth-child(1) {
        margin-left: 0;
      }
      &:nth-child(2) {
        background-color: #6759f1;
      }
      &:nth-child(3) {
        background-color: #e85c47;
      }
      &:nth-child(4) {
        background-color: #36ae48;
      }
    }
    .export-btn {
      width: 100px;
      height: 44px;
      text-align: center;
      line-height: 44px;
      background: #2860c3;
      border: 1px solid #dcdcdc;
      border-radius: 3px;

      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
